<template>
	<view class="head">
		<!-- 轮播图 -->
		<swiper style="height: 200px;" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,index) in lunboList" :key="index">
				<view class="swiper-item">
					<image style="width: 100%;" :src="item.url" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 公交搜索路线 -->
		<uni-search-bar @confirm="toSearch" placeholder="请输入搜索的公交地铁线路" v-model="searchKey" />
		<!-- 分类导航 -->
		<uni-section class="mb-10" title="分类" type="line" style="border-radius: 10px; height: 111px;">
			<view class="nav" style="height: 80px;">
				<uni-grid :show-border="false" :column="6" @change="changeGrid">
					<uni-grid-item v-for="(item,index) in gridData" :index="index">
						<!-- @tap="toMovie(item.id),toStar(item.id)" -->
						<view class="grid-item-box" style="background-color: #fff;">
							<img style="height: 50rpx; width: 50rpx;" :src="item.icon" alt="" />
							<text class="text" style="font-size: 10px;">{{item.title}}</text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
		</uni-section>
		<!-- 实时天气 -->
		<view class="weather" style="height: 100rpx;border: 1px solid #ccc;margin: 5px; border-radius: 5px;display: flex;justify-content: space-between; padding: 10rpx;align-items: center;
			">
			<view class="icon" style="width: 100rpx;height: 100rpx; ">
				<image style="width: 100%;height: 100%;" :src="'/static/weather/icons/'+ weatherNow.icon +'.png'"
					mode=""></image>
			</view>
			<view class="text" style="font-size: 50rpx;margin-left: 10px;">
				{{weatherNow.temp}}°C
			</view>
			<view class="text" style="font-size: 34rpx;margin-left: 10rpx;">
				{{weatherNow.text}}
			</view>
			<view class="text" style=" margin-left: 10rpx;">
				{{weatherNow.windDir}} {{weatherNow.windScale}}级
			</view>
			<view>
				<view class="text" style="margin-left: 10rpx;">
					体感温度： {{weatherNow.feelsLike }}°C
				</view>
				<view class="text" style="margin-left: 10rpx;">
					湿度： {{weatherNow.humidity }}%
				</view>
			</view>
		</view>
		<button type="default" @tap="showme">我在那里</button>
		    <view class="video-container">
		            <video 
		                class="my-video" 
		                src="/static/icon/10.mp4" 
		                controls
		                autoplay="false"
		                loop="false"
		                muted="false"
		                @play="onVideoPlay"
		                @pause="onVideoPause"
		                @ended="onVideoEnded"
		            ></video>
		        </view>
		 
		
	</view>
</template>

<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		ref
	} from 'vue'
	import {
		CONFIG
	} from "../../utils/config"

	import {
		userStore
	} from "../../store/userStore.js"
	let weatherNow = ref({})
	async function getWeather() {
		let res = await uni.$get(CONFIG.hefeng_now, {
			key: CONFIG.hefeng_key,
			location: CONFIG.hefeng_location
		})
		if (res.code == 200) {
			weatherNow.value = res.now
			console.log(res.now)
		}
	}
	const store = userStore()
	const searchKey = ref("")

	function toSearch() {
		if (searchKey.value == "") {
			uni.showToast({
				title: "请输入查询的公交地图线路",
				icon: "none"
			})
		} else {
			window.location.href =
				`https://uri.amap.com/line?name=${searchKey.value}&city=029&callnative=0`
			window.location.href = url
		}
	}

	onLoad(() => {
		getLunbo()
		// getCurrentPos()
		// searchCityBus()
		getWeather()
		getPos()
	})

	// 轮播的数据
	const lunboList = ref([])
	// 获取轮播数据
	async function getLunbo() {
		let res = await uni.$get(CONFIG.leanCloud_url + "/1.1/classes/Lunbo")
		if (res.statusCode == 200) {
			lunboList.value = res.data.results
		}
		console.log(lunboList.value)

	}
	let gridData = [{
			title: '热映电影',
			icon: 'static/icon/dy.png'
		},
		{
			title: '微博热搜',
			icon: 'static/icon/weibo.png'
		},
		{
			title: '每日运势',
			icon: 'static/icon/jinri.png'
		},
		{
			title: '天气预报',
			icon: 'static/icon/tq.png'
		},
		{
			title: '查询路线',
			icon: 'static/icon/che.png'
		},
		{
			title: '收藏',
			icon: 'static/icon/sc.png'
		}

	]
	// 获取当前位置的定位(经纬度)
	function getPos() {
		uni.getLocation({
			success: function(res) {
				// console.log('当前位置的经度：' + res.longitude);
				// console.log('当前位置的纬度：' + res.latitude);
				// 将定位保存到状态库
				store.setPos(res.latitude, res.longitude)
				console.log(store.currentPos)
			}
		});
	}

	function showme() {
		uni.navigateTo({
			url: "/pages/mi/mi?type=1"
		})
	}
	// 页面跳转
	function changeGrid(e) {
		let index = e.detail.index
		console.log(index)
		switch (index) {
			case 0:
				uni.navigateTo({
					url: "/pages/movie/movie"
				})
				break;
			case 1:
				uni.navigateTo({
					url: "/pages/weibo/weibo"
				})
				break;
			case 2:
				uni.navigateTo({
					url: "/pages/everyday/everyday"
				})
				break;
			case 3:
				uni.navigateTo({
					url: "/pages/weather/weather"
				})
				break;
		}

	}
</script>

<style lang="scss" scoped>
.head {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

  // 轮播图样式
  swiper {
    overflow: hidden; // 确保轮播图不超出容器
  }

  .swiper-item {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  // 公交搜索路线样式
  uni-search-bar {
    margin: 10px 0;
  }

  // 分类导航样式
  uni-section {
    margin-top: 10px;
  }

  .nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .grid-item-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px;
  }

  .text {
    margin-top: 5px;
  }

  // 实时天气样式
  .weather {
    background-color: #fff;
    color: #333;
    .icon {
      border-radius: 50%;
      overflow: hidden;
    }
  }

  // 视频容器样式
  .video-container {
    video {
      width: 100%;
      height: auto;
    }
  }

  // 定位按钮样式
  button {
    margin: 15px 0;
    background-color: #007aff;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
  }
}
</style>